<template>
  <div class="form-js-panel-modal">
    <je-modal
      v-model:visible="isShow"
      title="表单事件"
      width="97%"
      class="dialogClass"
      :footer="null"
      height="auto"
      :ok-button="okButton"
      :resize="false"
      :maximizable="false"
      cancel-button
      @close="onButton"
    >
      <je-layout style="height: 100%">
        <je-layout-sider width="300px" class="left-content">
          <je-row type="flex">
            <je-col :span="22" :order="1">
              <je-table
                border
                show-overflow="ellipsis"
                auto-resize
                resizable
                height="300px"
                size="mini"
                :data="tableData"
              >
                <je-table-column field="index" title="监听事件"></je-table-column>
                <je-table-column field="name" title="注册" :edit-render="{ name: 'input' }" />
              </je-table>
            </je-col>
            <je-col :span="2" :order="3">1</je-col>
          </je-row>
          <div class="left-bottom-content">
            <div class="function-select"
              ><span class="label">功能信息:</span>
              <je-select style="width: 120px" :options="selectData"></je-select
            ></div>
            <div class="function-select" style="padding: 10px 0"
              ><span class="label">编码:</span> OA_LCSP_YCSQ</div
            >
            <je-table border show-overflow auto-resize resizable :data="tableData" height="200px">
              <je-table-column field="index" title="监听事件"></je-table-column>
              <je-table-column field="name" title="注册" :edit-render="{ name: 'input' }" />
            </je-table>
          </div>
        </je-layout-sider>
        <je-layout>
          <je-layout-content>
            <!-- <je-editor-code monacokey="value" :value="editorValue" height="100%" /> -->
          </je-layout-content>
        </je-layout>
        <je-layout-sider
          v-model:collapsed="collapsed"
          collapsible
          collapsed-width="0"
          style="margin-left: 10px"
        >
          <div style="padding: 8px 0 8px 10px">帮助</div>
          <je-input-search
            v-model:value="searchValue"
            style="margin-bottom: 8px"
            placeholder="Search"
          />
          <div class="right-slider-height">
            <je-tree :tree-data="treeData" show-icon default-expand-all
          /></div>
          <div class="preview-code">点击tree节点回显到这个地方</div>
          <div class="appliction">应用方法</div>
        </je-layout-sider>
      </je-layout>
    </je-modal>
  </div>
</template>

<script>
  import { ref, defineComponent, onMounted } from 'vue';
  import { Layout, Row, Col } from 'ant-design-vue';
  import { Grid, Select, Tree, Input, Modal } from '@jecloud/ui';
  import { GetFormJsTreeData } from '../../../api/index';

  export default defineComponent({
    name: 'AlignmentPanel',
    components: {
      JeModal: Modal,
      JeLayout: Layout,
      JeLayoutSider: Layout.Sider,
      JeLayoutContent: Layout.Content,
      JeRow: Row,
      JeCol: Col,
      JeTable: Grid,
      JeTableColumn: Grid.Column,
      JeSelect: Select,
      // JeEditorCode: EditorCode,
      JeTree: Tree,
      JeInputSearch: Input.Search,
    },
    props: {
      visble: {
        type: Boolean,
        default: false,
      },
    },
    emits: ['changeModal', 'refreshChildData'],
    setup(props, { emit }) {
      // modal弹窗的显示隐藏
      const isShow = ref(props.visble);
      const visible = ref(true);
      const collapsed = ref(true);
      const searchValue = ref('');
      const selectData = ref([
        { label: '用车申请', value: '0' },
        { label: '用车申请', value: '1' },
        { label: '用车申请', value: '2' },
      ]);
      const editorValue = ref('表单事件表单事件');
      const treeData = ref([]);
      const tableData = ref([
        {
          index: 1,
          name: '11',
        },
        {
          index: 2,
          name: '1111221',
        },
        {
          index: 3,
          name: '1111221',
        },
        {
          index: 4,
          name: '1111221',
        },
        {
          index: 5,
          name: '1111221',
        },
        {
          index: 6,
          name: '1111221',
        },
      ]);
      const methods = {
        okButton() {
          // 1刷新列表
          emit('refreshChildData');
          // 2.关闭窗口
          methods.onButton();
        },
        onButton() {
          isShow.value = false;
          emit('changeModal', isShow.value);
        },
        getRightTreeData() {
          const params = {
            moreRoot: false,
            tableCode: 'JE_CORE_JEAPI',
            excludes: 'checked',
            j_query: JSON.stringify([
              { code: 'SY_PARENT', type: '!=', cn: 'and', value: ' ' },
              { code: 'SY_PARENT', type: '!=', cn: 'and', value: ' ' },
            ]),
            node: 'ROOT',
            onlyItem: true,
            strData: '',
            funcCode: '',
          };
          GetFormJsTreeData(params).then((res) => {
            treeData.value =
              res && res.children && res.children.length && methods.recursiveFilter(res.children);
          });
        },
        recursiveFilter(arr) {
          let tabledata = arr.map((item) => {
            item.key = item.id;
            item.title = item.text;
            item.disabled = false;
            // item = Object.assign({}, { ...item, key: item.id, title: item.text });
            if (item.children && item.children.length) {
              //递归循环
              item.children = methods.recursiveFilter(item.children);
            }
            return item;
          });
          return tabledata;
        },
      };
      onMounted(() => {
        methods.getRightTreeData();
      });
      return {
        isShow,
        ...methods,
        visible,
        collapsed,
        tableData,
        selectData,
        editorValue,
        treeData,
        searchValue,
      };
    },
  });
</script>
<style lang="less" scoped>
  .form-js-panel-modal {
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
</style>
<style lang="less">
  .dialogClass {
    .right-slider-height {
      height: calc(100vh - 367px);
    }
    .preview-code {
      height: 100px;
      overflow: scroll;
    }
    .appliction {
      border: 1px solid #e8eaec;
      padding: 8px 0;
      text-align: center;
    }
    .je-codeeditor,
    .monaco-editor {
      height: 100% !important;
    }

    .ant-modal-content {
      width: 100;
      height: calc(100vh - 50px) !important;
      top: 0px;
      overflow: hidden;
    }
    .ant-modal-body {
      height: calc(100vh - 100px) !important;
    }
    .ant-layout-sider {
      background: #fff;
      height: 100%;
      border: 1px solid #e8eaec;
    }
    .left-content {
      position: relative;
      .left-bottom-content {
        position: absolute;
        bottom: 0;
        width: 100%;
        .function-select {
          span {
            width: 60px;
            display: inline-block;
            text-align: right;
            margin: 0 20px;
          }
        }
      }
    }
  }
</style>
